<template>
  <div class="whole">
    <!-- 表格 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
    >
      <el-table-column prop="gimg" label="商品图片" width="250">
        <!--插入图片链接的代码-->
        <template slot-scope="scope">
          <img  :src="scope.row.gimg"  style="width: 120px;height: 120px">
        </template>
      </el-table-column>
      <el-table-column prop="gname" label="商品名" width="180">
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单号" width="280">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="100"></el-table-column>
      <el-table-column prop="cnumber" label="快递单号" width="180">
      </el-table-column>
      <el-table-column width="180">
        <template slot-scope="scope">
          <router-link
            tag="button"
            class="button button_c"
            :to="{
              name: 'address',
              query: {
                addr_uid: scope.row.uid,
                addr_gid: scope.row.gid,
                addr_mid: scope.row.mid,
                addr_oname: scope.row.oname,
                addr_ophone: scope.row.ophone,
                addr_oaddress: scope.row.oaddress,
                addr_cnumber: scope.row.cnumber,
              },
            }"
            @click="modifyOrderMerchant2()"
          >
            修改
          </router-link>
        </template>
      </el-table-column>
      <el-table-column width="180" prop="ostate">
        <template slot-scope="scope">
          <router-link
            tag="button"
            :to="{
              name: 'state',
              query: {
                state_uid: scope.row.uid,
                state_gid: scope.row.gid,
                state_mid: scope.row.mid,
                state: scope.row.ostate,
                cnumber:scope.row.cnumber
              },
            }"
            class="button button_p"
          >
            {{ scope.row.ostate }}
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {findOrdersAllMerchant2} from "../api/merchant";

  export default {
    data() {
      return {
        tableData: [],
        currentPage: 1, // 当前页码
        total: 6, // 总条数
        pageSize: 2, // 每页的数据条数
      };
    },
    methods: {
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      findOrdersAllMerchant2() {
        findOrdersAllMerchant2({
          mid: this.$store.state.merchant.mid
        }).then((result) => {
          this.tableData = result.data.data;
        })
      },
    },
    created() {
      this.findOrdersAllMerchant2();
    },
  };
</script>


<style scoped>
  /* 整体享有移动 */
  .whole {
    position: absolute;

    top: 100px;
    left: 170px;
    bottom: 0;
  }

  .right {
    position: absolute;
    width: 1365px;
    top: 100px;
    left: 170px;
    bottom: 0;
    /* padding: 10px; */
    overflow-x: hidden; /* 当内容过多时y轴出现滚动条 */
    background-color: rgb(250, 247, 199);
  }

  .O_head {
    position: absolute;
    width: 1365px;
    height: 100px;
    top: 0px;
    left: 0px;
    /* background-color: aqua; */
  }

  .search {
    position: relative;
    width: 400px;
    height: 50px;
    top: 30px;
    left: 50px;
    float: left;
    /* background-color: antiquewhite; */
  }

  .search_input {
    width: 350px;
  }

  .searchButton {
    position: relative;
    /* width: 200px;
    height: 70px; */
    top: 28.5px;
    left: 10px;
    float: left;
  }

  .button {
    border: none;
    color: black;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    background-color: rgb(245, 212, 142);
    width: 150px;
  }

  .orderList {
    position: relative;
    width: 100%;
    height: 200px;
    top: 100px;
    left: 0px;
    background-color: #faf7c7;
    border: 2px solid white;
    margin-top: 20px;
  }

  .O_picture {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 25px;
    left: 25px;
    background-color: wheat;
  }

  .O_name {
    position: absolute;
    width: 400px;
    height: 30px;
    top: 35px;
    left: 200px;
    /* background-color: wheat; */
  }

  .O_number {
    position: absolute;
    width: 400px;
    height: 30px;
    top: 90px;
    left: 200px;
    /* background-color: wheat; */
  }

  .P_number {
    position: absolute;
    width: 400px;
    height: 30px;
    top: 140px;
    left: 200px;
    /* background-color: wheat; */
  }

  .O_price {
    position: absolute;
    width: 200px;
    height: 30px;
    top: 35px;
    left: 700px;
    /* background-color: wheat; */
  }

  .Button_C {
    position: absolute;
    height: 50px;
    top: 35px;
    left: 1100px;
  }

  /* .button_c {
    width: 100px;
  } */

  .Button_P {
    position: absolute;
    height: 50px;
    top: 100px;
    left: 1100px;
  }

  /* .button_p {
    width: 100px;
  } */
</style>
